<template>
  <a-tabs :type="editable ? 'editable-card' : 'line'" @edit="onEdit">
    <a-tab-pane :tab="$locale(tab.viewItem ? tab.viewItem.viewName : 'm.eform.formDesign.label.Tab')" :key="index+1"
                v-for="(tab, index) in col.tabs" :forceRender="true"
                :closable="col.tabs.length > 1">
      <div :style="{height: currentHeightTab}" class="viewColClass">
        <span v-if="editable">{{tab.viewItem}}</span><br/>
        <view-layout-item v-if="editable" :view-item="tab.viewItem" :cols="cols"
                          :changeTabNameFlg="true" @selectViewOk="selectViewOk" :groupId="groupId"></view-layout-item>
      </div>
    </a-tab-pane>
  </a-tabs>
</template>

<script>

  import ViewLayoutItem from './ViewLayoutItem';

  export default {
    name: "ViewLayoutTab",
    components: {
      ViewLayoutItem
    },
    props: {
      cols: Array,
      editable: Boolean,
      col: Object,
      currentHeightTab: String,
      groupId: {
        type: String,
        required: true
      },
    },
    data() {
      return {}
    },
    methods: {
      onEdit(targetKey, action) {
        if (action == "add") {
          const tab = {
            viewItem: {
              viewName: 'm.eform.formDesign.label.Tab',
              viewCode: '',
              viewType: '',
              relationStatus: 'open',
              relationOpenFks: 'open',
              showRules: 'show',
              saveBut: 'auto',
              formStatus: 'auto',
              mainForm: "Y",
              flowForm: "N"
            }
          };
          this.col.tabs.push(tab);
        } else if (action == "remove") {
          this.col.tabs.splice(targetKey - 1, 1);
        }
      },
      selectViewOk(formData) {
        this.$emit("selectViewOk", formData);
      }
    }
  }
</script>
<style>
  .viewColClass {
    border: grey 1px solid;
    padding: 10px;
    text-align: center;
  }
</style>
